<template>
  <div class="container-fluid">
    <div class="row school-model school-tiao">
      <div class="col school-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col text-right"></div>
    </div>
    <div class="row school-model index-model">
      <div class="col school-col-table">
        <div class="text-center">
          <el-date-picker
            v-model="timedate"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            @change="changes"
          ></el-date-picker>
          &nbsp; 星期{{ ['日', '一','二', '三','四', '五','六'][(new Date(time).getDay())] }}
        </div>
        <el-table :data="tableData" style="width: 100%; border: 1px solid #eeeeee">
          <el-table-column prop="schoolclasstime" label="上课时段" width="100"></el-table-column>
          <el-table-column prop="index" label="班级" width="100">
            <template slot-scope="scope">{{getschoolclazzbyid( scope.row.schoolclazzid).name}}</template>
          </el-table-column>
          <el-table-column prop="city" sortable label="课时" width="100">
            <template slot-scope="scope">{{totime(scope.row.starttime)}}</template>
          </el-table-column>

          <el-table-column prop="name" sortable label="教室" width="100">
            <template
              slot-scope="scope"
            >{{getschoolclassroombyid( scope.row.schoolclassroomid).name}}</template>
          </el-table-column>
          <el-table-column prop="address" sortable label="教师" width="100">
            <template slot-scope="scope">{{getschooluserbyid( scope.row.schooluserid).name}}</template>
          </el-table-column>
          <el-table-column prop="address" label="助教">
            <template slot-scope="scope">{{ usernameids(scope.row.schooluserids) }}</template>
          </el-table-column>
          <el-table-column prop="address" sortable label="状态" width="80">
            <template
              slot-scope="scope"
            >{{scope.row.schoolclazzstudentcalendar.find(v=> !v.state)?'已点评':"未点评"}}</template>
          </el-table-column>
          <el-table-column prop="info" label="点评/应到">
            <template slot-scope="scope">
              <router-link
                :to="{name: '查看下课点评', params: { ID: scope.row.ID }}"
                v-text="isaction(scope.row)"
              ></router-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          @current-change="currentChange"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="total.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { sortBy } from "underscore";
import { asyncgetschoolclazzschedule } from "../../../../plugins/api.js";
import { totime, isinclass } from "../../../utils.js";
export default {
  name: "classevaluation",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      currentPage: 1,
      pagesize: 10,
      calendar: [],
      getschoolclazzschedule: [],
      timedate: new Date().toLocaleDateString()
    };
  },
  async created() {
    this.timedate = this.time;
    await this.start();
  },
  props: {
    time: {
      type: String,
      default: new Date().toLocaleDateString()
    }
  },
  computed: {
    ...mapGetters([
      "getschoolclazz",
      "getschooluser",
      "getschoolclassroom",
      "getuser",
      "getschooluserbyid",
      "getschoolclassroombyid",
      "getschoolclazzbyid"
    ]),
    total() {
      const d = new Date(this.time).toLocaleDateString();
      return this.getschoolclazzschedule.filter(v => {
        return (
          new Date(v.starttime).toLocaleDateString() == d &&
          v.schooluserid == this.getuser.ID
        );
      });
    },
    tableData() {
      const { currentPage, pagesize, getschoolclazzschedule } = this;
      const x = getschoolclazzschedule;
      let arr = [];
      for (let v in x) {
        if (
          v < currentPage * pagesize &&
          v > (currentPage - 1) * pagesize - 1
        ) {
          arr.push(x[v]);
        }
      }
      return sortBy(arr, v => {
        const a1 = v.schoolclasstime.split(":")[0];
        return Number(a1);
      });
    }
  },
  watch: {
    time() {
      this.start();
    }
  },
  methods: {
    async currentChange(index) {
      await this.start();
      this.currentPage = index;
    },
    totime,
    gettime(row) {
      const { starttime, endtime } = row;
      return `${starttime}-${endtime}`;
    },
    async start() {
      try {
        this.getschoolclazzschedule = await asyncgetschoolclazzschedule({
          starttime: new Date(this.time),
          uid: true
        });
      } catch (err) {
        console.log(err);
      }
    },
    usernameids(id) {
      if (id) {
        const data = this.getschooluser.find(v => v.ID == id);
        return data ? data.name : "";
      }
      return "";
    },
    isaction({ schoolclazzstudentcalendar, schoolclazz, starttime }) {
      const { schoolstudentschoolclazz } = schoolclazz;
      const x = isinclass(schoolstudentschoolclazz, starttime);
      const y = schoolclazzstudentcalendar.filter(v => {
        return !v.state;
      });
      return `${y.length}/${x.length}`;
    },
    changes(i) {
      this.$router.push({
        name: "下课点评",
        params: {
          time: new Date(i).toLocaleDateString()
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
}
</style>